<template>
  <div>
    <div class="title">
      <div class="left">
        <div class="collapse-class" @click="colchange">
          <template v-if="collapse">
            <yu-icon iconName="zhankaicaidan" />
          </template>
          <template v-else>
            <yu-icon iconName="shouqicaidan" />
          </template>
        </div>
        <div class="dh">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/sys/index' }">首页</el-breadcrumb-item>
            <template v-for="item in data.crumb">
              <el-breadcrumb-item>{{ item.name }}</el-breadcrumb-item>
            </template>
          </el-breadcrumb>
        </div>
      </div>
      <div class="right">you</div>
    </div>
    <div class="tab-class" v-if="true">
      <tabs></tabs>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, onMounted, getCurrentInstance, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import tabs from './Tabs.vue';
  let { proxy } = getCurrentInstance();
  const route = useRouter();
  const collapse = ref(false);
  const data = reactive({ crumb: [] });
  onMounted(() => {
    //刷新时获取路由
    data.crumb = findMenu(findParent(route.currentRoute.value.path, proxy.$storage.getItem('menu')), proxy.$storage.getItem('menu'));
  });
  watch(
    () => route.currentRoute.value,
    () => {
      //筛选面包屑数组
      data.crumb = findMenu(findParent(route.currentRoute.value.path, proxy.$storage.getItem('menu')), proxy.$storage.getItem('menu'));
    }
  );
  const findParent = (routePath, list = []) => {
    let parentId = '';
    for (let i = 0; i < list.length; i += 1) {
      const item = list[i];
      // 找到目标
      if (item.path === routePath) {
        return item.menuId;
      }
      // 如果存在下级节点，则继续遍历
      if (item.children) {
        // 预设本次是需要的节点并加入到最终结果result中
        const parentId = findParent(routePath, item.children);
        // 如果不是false则表示找到了，直接return，结束递归
        if (parentId) {
          return parentId;
        }
      }
    }
    return parentId;
  };

  const findMenu = (parentId, list = [], result = []) => {
    for (let i = 0; i < list.length; i += 1) {
      const item = list[i];
      // 找到目标
      if (item.menuId === parentId) {
        // 加入到结果中
        result.push(item);
        // 因为可能在第一层就找到了结果，直接返回当前结果
        if (result.length === 1) return result;
        return true;
      }
      // 如果存在下级节点，则继续遍历
      if (item.children) {
        // 预设本次是需要的节点并加入到最终结果result中
        result.push(item);
        const find = findMenu(parentId, item.children, result);
        // 如果不是false则表示找到了，直接return，结束递归
        if (find) {
          return result;
        }
        // 到这里，意味着本次并不是需要的节点，则在result中移除
        result.pop();
      }
    }
    // 如果都走到这儿了，也就是本轮遍历children没找到，将此次标记为false
    return false;
  };
  const colchange = () => {
    if (collapse.value) {
      collapse.value = false;
    } else {
      collapse.value = true;
    }
    proxy.$store.dispatch('editChangeCollapse', collapse);
  };
</script>
<style lang="scss" scoped>
  .title-class {
    background-color: rgb(242, 235, 243);
    height: 100%;
  }
  .tab-class {
    width: 100%;
    height: 30px;
    .el-tabs {
      --el-tabs-header-height: 30px;
    }
  }
  .title {
    line-height: 40px;
    justify-content: space-between;
    display: flex;
    .left {
      display: flex;
      .collapse-class {
        .svg-icon {
          width: 1.5em;
          height: 1.5em;
          cursor: pointer;
        }
        height: 40px;
        line-height: 50px;
      }
      .dh {
        padding-left: 10px;
        .el-breadcrumb {
          font-size: 15px;
          line-height: 40px;
        }
      }
    }
    .right {
      float: right;
    }
  }
</style>
